<template>
  <el-table
    :data="config.tableData"
    :max-height="config.style && config.style.maxHeight"
    :size="config.style && config.style.size"
    :stripe="config.style && config.style.stripe"
    :border="config.style && config.style.border"
    :header-cell-style="{
      'background-color':
        (config.style && config.style.headerBackColor) || '#F5F5F5', // 表头背景颜色
      color: '#333'
    }"
    v-loading="config.loading"
  >
    <template v-for="(item, index) in config.column" :key="index">
      <!-- 索引 -->
      <el-table-column
        v-if="item.type && item.type === 'index'"
        :label="item.label"
        :index="indexMethod"
        :align="item.align || 'center'"
        :type="item.type"
        :width="item.width"
      >
      </el-table-column>

      <!-- 操作列(只考虑里面为按钮的情况) -->
      <el-table-column
        v-else-if="item.type && item.type === 'operate'"
        :label="item.label"
        :width="item.width"
        :align="item.align || 'center'"
        :fixed="item.fixed"
      >
        <template v-if="item.slotName" v-slot="{ row }">
          <slot :name="item.slotName" :row="row">
            <!-- 按钮存在 -->
            <template v-if="item.buttonGroup && item.buttonGroup.length > 0">
              <!-- 自定义按钮最大个数buttonCountLimit，>= buttonCountLimit时使用下拉菜单 -->
              <component
                :rowData="row"
                :buttonInfo="item.buttonGroup"
                :is="
                  item.buttonGroup.length >= item.buttonCountLimit
                    ? dropDown
                    : buttonGroup
                "
                @customRemove="customRemove"
              ></component>
            </template>
            <!-- 没有按钮 -->
            <span v-else>-</span>
          </slot>
        </template>
      </el-table-column>

      <!-- 基本列 -->
      <el-table-column
        v-else
        :prop="item.prop"
        :label="item.label"
        :align="item.align || 'center'"
        :width="item.width"
        :min-width="item.minWidth"
        :formatter="item.formatter"
        :show-overflow-tooltip="true"
      >
        <template v-slot="{ row }">
          <span v-if="item.formatter">
            {{ item.formatter(row) }}
          </span>
          <slot
            v-else-if="item.slotName"
            :name="item.slotName"
            :row="row"
          ></slot>
          <span v-else>{{ row[item.prop] || "-" }}</span>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <el-pagination
    v-if="config.pagination"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="config.pagination.current"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="config.pagination.limit"
    layout="total, sizes, prev, pager, next, jumper"
    :total="config.pagination.total"
  >
  </el-pagination>
</template>

<script>
// 操作按钮动态组件
import buttonGroup from "@/components/table/buttonGroup.vue";
import dropDown from "@/components/table/dropDown.vue";
import { reactive, toRefs } from "vue";

export default {
  components: {
    buttonGroup,
    dropDown
  },
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  setup(props, ctx) {
    const state = reactive({
      pagination: {
        current: 1,
        limit: 10,
        total: 0
      }
    });
    const customRemove = (rowData) => {};
    const indexMethod = (index) => {
      let current = props.config.pagination && props.config.pagination.current; //当前页码，具体看组件取值
      let limit = props.config.pagination && props.config.pagination.limit; //每页条数，具体是组件取值
      return index + 1 + (current - 1) * limit;
    };
    const handleSizeChange = (val) => {
      ctx.emit("handleSizeChange", val);
    };
    const handleCurrentChange = (val) => {
      ctx.emit("handleCurrentChange", val);
    };
    return {
      ...toRefs(state),
      customRemove,
      indexMethod,
      handleSizeChange,
      handleCurrentChange
    };
  }
};
</script>

<style scoped>
.el-pagination {
  margin-top: 5px;
  float: right;
}
</style>
